<template>
	<div class="col-md-4">
		<form class="form-horizontal" @submit.prevent="add">
			<div class="form-group">
				<label>用户名</label>
				<input type="text" class="form-control" placeholder="用户名" v-model="name">
			</div>
			<div class="form-group">
				<label>评论内容</label>
				<textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default pull-right">提交</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	export default {
		
		data() {
			return {
				name:'',
				content:''
			}
		},
		methods:{
			// 提交form表单
			add() {
				const name = this.name;
				const content = this.content;
				if(!name || ! content) {
					alert("您还没有写下任何东东哦~~~");
					return;
				}
				const obj = {name: name, content: content};
				this.addComment(obj);
				
				this.name = '';
				this.content = '';
			}
		},
		props:{
			addComment:{ // 指定属性名，属性类型，必要性
				type:Function,
				required:true
			}
		}
	}
</script>

<style>
</style>
